@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.left{display: none;}
.top{height: 4vh;overflow: hidden;}
.media{clear: both;transform: translateX(10vw) scale(1.82,1) ;}
.media p,.media a,.media h2,.media svg,.media li{transform: scale(1,1.81);}
#th1z{transform: translate(0,400px) scale(1,1.81);}
}
@media screen and (min-width:960px){
	.top{height: 8vh;}
}
@font-face{
	font-family: 'ops';
	src:url('./OPS.ttf');
}
*{margin: 0;padding: 0;font-family: "ops";transition: background-color 0.4s linear 0s,width 0.4s linear 0s,color 0.4s linear 0s,background 0.4s linear 0s;}

body{
	background-color: #262626;
	background-image: url(../img/inba.png);
	background-size: 100vw 92vh;
	background-position:bottom;
}
.top{
	width: 100vw;
	background-color: #262626;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
}
.top>a{
	float: left;
	margin: 0px 1.25rem;
	font-family: 'ops';
	height: 4.6875rem;
	line-height: 4.6875rem;
	color: #f2f2f2;
	font-size: 1.375rem;
	text-decoration: none;
}
#tfirst{
	margin: 0.625rem 0.625rem 0 0.625rem ;
}
#tsecond{
	float: right;
}
#tthird{
	float: right;
	margin: 0px 1.25rem 0px 5rem;
}
.content{
	position: absolute;
	transform: translateX(12.5vw);
	height: 92vh;
}
.content:after {
            content: "";
            clear: left;
            display: block;
        }
.media{
	overflow-y: scroll;
	height: 92vh;
	float: left;
	margin: 0 auto;
	width: 55vw;
	background-color: #262626;
	background-image: linear-gradient(180deg, #262626 40%, #30c9cd 100%);
	background-size: 150% 150%;
	background-position: center;
}
.media::-webkit-scrollbar {
    display: none;
}
.uiquan{
	overflow: hidden;
	margin: 4vh 2vw 7vh 2vw;
	width: 52vw;
	height: 30vh;
}
#uib1,#uib2,#uih1,#uih2,#uih1r{border-radius:0 1.5625rem 1rem 1rem ;background-color: white;height: 30vh;overflow: hidden;}
#uib1,#uib2,#uih1,#uih1r{display: inline-block;}
#uib2{
	background-image: url(../img/python.jpg);
	background-position: 100% 6%;
	width: 34vw;
}
#uib2:hover #tb2{background: linear-gradient(to bottom, rgba(51,13,105,0) 68%, rgba(48,201,205,1));color: #262626;}
#uib1:hover{background: linear-gradient(to top, rgba(48,201,205,1), rgba(51,13,105,1));}
#uib1:hover>a{color: #262626;}
#uib1:hover>h2{color: #F2F2F2;}
#uib2:hover #tb2>p:after{content: "blender可视化";}
#uib1{
	font-size: 1.5vw;
	width: 17vw;
	background: linear-gradient(to bottom, rgba(48,201,205,0.1), rgba(51,13,105,0.1))
}
#uib1>a{color: rgba(242,242,242,0.5);display: block;text-decoration: none;margin: 1vh 0 1vh 1vw;line-height: 5vh;}
#u1b1 a:hover{color: #F2F2F2;}
#uih1{
	background-image: url(../img/th1.png);
	background-size: 100% 100%;
	margin: 0 2vw 0 0;
	width: 24.5vw;
}
#uih1 p{padding: 1vw;padding-top: 0;padding-bottom: 0;}
#uih1:hover #th1z{color: #F2F2F2;position: absolute;bottom: 20px;}
#uih1:hover #th1{	background: linear-gradient(to top, rgba(51,13,105,0) 60%, rgba(48,201,205,0.8)) ; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}
#th1z{font-size: 2vw;}
#uih1r{
	margin: 0;
	width: 24.5vw;
	background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(51,13,105,0));
}
#uih2{
	background-image: url(../img/hudyis.png);
	background-size: auto 100%;
	background-repeat: round;
	width: 51vw;
}
#tb2{
	font-size:3vw;
	color: #F2F2F2;
	border-radius:0 1.5625rem 1rem 1rem ;
	position: relative;
	display: block;
	width: 34vw;
	height: 30vh;
	background: linear-gradient(to bottom, rgba(48,201,205,0.6), rgba(51,13,105,0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
#tb2>p{position: relative;line-height: 50vh;text-align: right;}
#tb2>p:after{content: "python结课作业";padding-right: 1vw;}
#th2{	
	font-size:3vw;
	color: #262626;
	border-radius:0 1.5625rem 1rem 1rem ;
	position: relative;
	display: block;
	width: 51vw;
	height: 30vh;
	background: linear-gradient(to bottom, rgba(48,201,205,0.6), rgba(51,13,105,0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
#th1{	
	font-size:3vw;
	color: #F2F2F2;
	border-radius:0 1.5625rem 1rem 1rem ;
	position: relative;
	display: block;
	width: 24.5vw;
	height: 30vh;
	background: linear-gradient(to bottom, rgba(48,201,205,0.6), rgba(51,13,105,0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
#uih1r>#th1{	background: linear-gradient(to bottom, rgba(48,201,205,0.6), rgba(51,13,105,0)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}
#xm{display: block;padding-left: 1vw;position: absolute;bottom: 10px;right: 15px;color: #F2F2F2;}

#xmt{display: none;text-align: left;font-size: 1vw;padding: 1vw;padding-top: 0;height: 25vh;width: 48vw;letter-spacing: 3px;}
#xmt span{font-size: 3vw;}
#uih2:hover>#th2>#xm{display:none;}
#uih2:hover>#th2>#xmt{display: block;}
#uih2:hover>#th2{color: #F2F2F2;background: linear-gradient(to bottom, rgba(51,13,105,0.6), rgba(48,201,205,0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}
.left{
	position: relative;
	transform: translateY(2.5vh);
	float: left;
	width: 10vw;
}
.left #l{
	overflow: hidden;
	height: 5vh;
	width: 10vw;
	border-radius:0.125rem 0 0 1.5625rem;
	background: rgba(38,38,38,0);
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2), 
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	margin-bottom: 2.5vh;
}
.left .lc{
	border-radius:0 1.5625rem 0.125rem 0;
	display: inline-block;
	width: 4vw;
	height: 3.125rem;
}
.lc#lc1{
	background: #262626;
}
#al1:link>#l{background-color: #262626;}
#al1:hover>#l>#lc1{width: 10vw;}
.lc#lc2{
	background: #4d0500;
}
#al2:hover>#l>#lc2{width: 10vw;}
.lc#lc3{
	background: #1d1e5c;
}
#al3:hover>#l>#lc3{width: 10vw;}
.lc#lc4{
	background: #003000;
}
#al4:hover>#l>#lc4{width: 10vw;}
.lc#lc5{
	background: #002a45;
}
#al5:hover>#l>#lc5{width: 10vw;}
.lc#lc6{
	background: #3d0c4f;
}
#al6:hover>#l>#lc6{width: 10vw;}
.left p{
	position: fixed;
	color: #f2f2f2;
	margin: -5.5vh 0 0 5vw;
	font-size: 1.1vw;
	vertical-align:middle;
	line-height: 5vh;
	height: 5vh;
}
.top a:hover{
	color: #2fc7cc;
}
li{font-size: 0.95vw;line-height: 3vh;height: 3vh;width: 22vw;margin-bottom: 1vh;color: #262626;}
li a{font-size: 0.95vw;line-height: 3vh;height: 3vh;width: 22vw;margin-bottom: 1vh;color: inherit;}
li:hover{color:#2fc7cc ;background-color: #262626;}
li:hover svg{fill: #F2F2F2;}
ul{padding: 1vw;list-style: none;}
svg{margin: 0 1vw 0 0.4vw;}
